<template>
  <div>
     理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数 <br><br>

    Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，
    原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，
    所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，
    因为该钩子函数执行时所有的DOM挂载已完成。
    <br>
    <br>


     使用：<br>
     
     <div>
      <div id="divBox">
        {{testMsg}}
      </div>
       <el-button @click="test">{{testMsg}}</el-button>
     </div>

  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      testMsg:'原始值'
    }
  },
  methods: {
    test() {
      this.testMsg = "修改后的值"
      // console.log(this.testMsg);
      this.$nextTick(() => {
        var innerHTML = document.getElementById('divBox').innerHTML;
        console.log(innerHTML); //修改后的值
      })
      // var innerHTML = document.getElementById('divBox').innerHTML;
      // console.log(innerHTML); //原始值
    }
  }
};
</script>

<style scoped>
</style>
